<template>
	<view class="container">
		<view class="withdraw-header">
			<view class="withdraw-title">
				<view>可提现金额(元)</view>
				<view @click="withdrawmoney()">
					<text>立即提现</text>
				</view>
			</view>
			<view class="withdraw-money">
				{{wallets.amount}}
			</view>
		</view>
		<view class="zhanwei"></view>
		
		<view class="alipay-info">
			<view class="alipay-list" @click="set_alipay_account()">
				<view class="alipay-weight">支付宝信息</view>
				<view>修改 ></view>
			</view>
			<view class="alipay-list">
				<view>真实姓名</view>
				<view>{{wallets.real_name}}</view>
			</view>
			<view class="alipay-list">
				<view>支付宝账号</view>
				<view>{{wallets.alipay_account}}</view>
			</view>
		</view>
		
		<view class="zhanwei"></view>
		<view class="withdraw-body">
			<Nav :navData="navData" @changeTab='changeTab' :changeNavIndex="current"></Nav>
			<view class="uni-tab-bar">
				<swiper class="swiper-box" :autoplay="false" :duration="200" @change="changeSwiper" :style="{height:swiperheight+'px'}" :current="tabIndex">
					<swiper-item>
						<view class="withdraw-item" v-for="(items,index) in myincome_data" :key="index">
							<view class="withdraw-item-left">
								<view>{{items.title}}</view>
								<view>{{items.predict_money}}</view>
							</view>
							<view class="withdraw-item-right">
								<text>{{items.money}}</text>
							</view>
						</view>
					</swiper-item>
					<swiper-item>
						<view class="withdraw-item" v-for="(items,index) in withdarw_data" :key="index">
							<view class="withdraw-item-left">
								<view>提现申请</view>
								<view>{{items.created_at}}</view>
							</view>
							<view class="withdraw-item-right-money">
								<view v-if="items.status==1">提现中</view>
								<view v-if="items.status==2">审核通过</view>
								<view v-if="items.status==8">提现成功</view>
								<view v-if="items.status==-1">提现失败</view>
								<view>{{items.money}}</view>
							</view>
						</view>
						<uni-load-more :status="more"></uni-load-more>
					</swiper-item>
				</swiper>
			</view>
			
		</view>
	</view>
</template>

<script>
	import Nav from '../../components/withdraw/nav'
	import uniLoadMore from '@/components/uni-load-more/uni-load-more'
	import apiorder from '../../common/api/order'
	export default {
		data() {
			return {
				more:'loading',
				carouselheight:120,
				swiperheight:150,//屏幕高度
				current: 0,
				refreshering: true,
				tabIndex:0,//tab索引
				// 导航栏数据
				navData: [
					{name:'收入'},
					{name:'提现记录'},
				],
				// 分类数据
				myincome_data:[],
				withdarw_data:[],
				wallets:{},
				
			}
		},
		components:{
			Nav,
			uniLoadMore,
			apiorder
		},
		onShow(){
			this.withdraw_info()
		},
		onLoad() {
			this.get_month_up_money()
		},
		methods: {
			
			//打开提现页面
			withdrawmoney(){
				if(this.wallets.real_name == '' || this.wallets.alipay_account == ''){
　　　　　　　　　	uni.showToast({
　　　　　　　　　　　		title: '设置支付宝账号',
　　　　　　　　　　		icon: 'none'
　　　　　　　　　	})
					return false
				}
				uni.navigateTo({
					url:'money'
				})
			},
			
			//上个月和上上个月的收益
			get_month_up_money(){
				apiorder.get_month_up_money({}).then(res =>{
					if(res.code == 1){
						this.myincome_data=res.data
						this.swiperheight = res.data.length * 80
					}
				}).catch(cateres =>{

				});
			},
			
			//提现列表
			income_logo(){
				apiorder.income_logo({}).then(res =>{
					if(res.code == 1){
						this.withdarw_data=res.data
						this.swiperheight = res.data.length * 80
					}
				}).catch(cateres =>{
					
				});
			},
			
			//提现数据
			withdraw_info(){
				apiorder.withdraw_info({}).then(res =>{
					if(res.code == 1){
						this.wallets=res.data
					}
				}).catch(cateres =>{
					
				});
			},
			
			//设置支付宝账号
			set_alipay_account(){
				uni.navigateTo({
					url:'../set/setalipay'
				})
			},
			
			// 选择导航栏事件
			changeTab(index){
				uni.hideNavigationBarLoading()
				this.tabIndex = index
				if(this.tabIndex == 0){
					this.get_month_up_money()
				}else{
					this.income_logo()
				}
			},
			//滑动切换
			tabChange(e){
				uni.hideNavigationBarLoading()
				this.current = e.detail.current
				console.log('tabChange')
			},
			loadmore(){
				//上拉加载
			},
			// 滑动内容页事件
			changeSwiper(e) {
				this.current = e.detail.current
				this.$emit('changeNavIndex', e.detail.current)
			},
		}
	}
</script>

<style lang="scss">
	page{
		background-color:#F5F5F5;
	}
	.withdraw-header{
		padding:20upx;
		background-color:#FF3333;
		.withdraw-title{
			display:flex;
			flex-direction: row;
			flex-wrap: wrap;
			padding:30upx 0;
			view{
				width:50%;
				text{
					color:#FF3333;
					background-color: #FFFFFF;
					padding:20upx 40upx;
					border-radius:40upx;
					font-weight:bold;
				}
			}
			view:first-child{
				color: #FFFFFF;
				font-size:30upx;
			}
			view:last-child{
				text-align: right;
			}
		}
		.withdraw-money{
			font-size:60upx;
			color:#FFFFFF;
			font-weight:bold;
		}
	}
	.zhanwei{
		height:20upx;
	}
	.alipay-info{
		background-color:#FFFFFF;
		padding:20upx;
		.alipay-list{
			display:flex;
			flex-direction: row;
			flex-wrap: wrap;
			padding:15upx 0;
			view{
				width:50%;
			}
			view:last-child{
				text-align:right;
			}
			.alipay-weight{
				font-weight:bold;
				font-size:30upx;
			}
		}
	}
	.withdraw-body{
		background-color: #FFFFFF;
		.withdraw-item{
			padding:20upx;
			display:flex;
			flex-direction: row;
			flex-wrap: wrap;
			border-bottom: 1upx solid #F5F5F5;
			.withdraw-item-left{
				width:70%;
				view{
					padding:5upx 0;
				}
				view:first-child{
					font-weight:bold;
				}
			}
			.withdraw-item-right{
				width:30%;
				text-align: center;
				font-size:40upx;
				font-weight:bold;
				padding-top:10upx;
			}
			.withdraw-item-right-money{
				width:30%;
				text-align: center;
				font-weight:bold;
				padding-top:10upx;
			}
		}
	}
</style>
